<template>
  <div class="app-container">
    <el-form :inline="true" ref="refForm" :model="form">
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username" placeholder="请输入账号" @keyup.enter.native="submitFilterForm"></el-input>
      </el-form-item>
      <el-form-item label="粽子类型" prop="zongziType">
        <el-select v-model="form.zongziType" placeholder="请选择粽子类型">
          <el-option label="全部" key="" value=""></el-option>
          <el-option label="如意粽子" key="0" value='0'></el-option>
          <el-option label="吉祥粽子" key="1" value='1'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指定奖品" prop="reward">
        <el-select v-model="form.rewardId" placeholder="请选择指定奖品" :disabled="rewardDisableFlag">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="(item,index) in rewardList" :label="item.name" :key="index" :value='item.id'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="获得状态" prop="status">
        <el-select v-model="form.status" placeholder="请选择获得状态">
          <el-option label="否" key="0" value="0"></el-option>
          <el-option label="是" key="1" value='1'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button class="filter-item" type="primary" icon="el-icon-search" @click="submitFilterForm">搜索</el-button>
        <el-button @click="selfResetForm('refForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table
      border
      :data="tableData.list"
      v-loading="loading"
      element-loading-text="加载中..."
      class="el-table-align-center">
      <el-table-column prop="username" label="账号" align="center"></el-table-column>
      <el-table-column prop="zongziType" label="粽子类型" align="center">
        <template slot-scope="{row}">
          {{row.zongziType===0?'如意粽子':'吉祥粽子'}}
        </template>
      </el-table-column>
      <el-table-column prop="reward" label="指定奖品" align="center"></el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center">
        <template slot-scope="{row}">
          {{row.createTime| toTime('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="获得状态" align="center">
        <template slot-scope="{row}">
          {{row.status===0?'否':'是'}}
        </template>
      </el-table-column>
      <el-table-column prop="getTime" label="获得时间" align="center">
        <template slot-scope="{row}">
          {{row.getTime| toTime('YYYY-MM-DD HH:mm:ss')}}
        </template>
      </el-table-column>
      <el-table-column prop="operate" label="操作" align="center">
        <template slot-scope="{row}">
          <el-button v-if="row.status===0" type="text" @click="deleteReward(row)">删除</el-button>
          <span v-else>--</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total" class="inline-block">
      </el-pagination>
      <el-button class="fr" size="medium" type="primary" @click="assignPrizeDialog=true">指定奖品</el-button>
    </div>

    <el-dialog title="指定奖品" :visible.sync="assignPrizeDialog" append-to-body width="30%">
      <assign-prize-dialog @refresh="refresh" v-if='assignPrizeDialog' v-model="assignPrizeDialog"></assign-prize-dialog>
    </el-dialog>
    <el-dialog :visible.sync="deleteFlag" width="30%">
      <span>确定要删除这条提案吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteFlag = false">取 消</el-button>
        <el-button type="primary" @click="doSave({ action: 'deleteReward' })">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { grid, form } from '@/build';
import assignPrizeDialog from './assignPrizeDialog';
import { getAssignRiceDumplingRewardList, deleteAssignRiceDumplingRewardList } from '@/services/api/activity';
import rewardList from './reward';

export default {
  name: 'assignPrize',
  mixins: [grid, form],
  components: { assignPrizeDialog },
  data() {
    return {
      tableData: {
        list: [],
        total: 0,
      },
      form: {
        username: '',
        zongziType: '',
        rewardId: '',
        status: '',
      },
      filters: {
        username: '',
        zongziType: '',
        rewardId: '',
        status: '',
        size: 20,
        page: 1,
      },
      deleteObj: {
        id: '',
      },
      rewardList: [],
      assignPrizeDialog: false,
      rewardDisableFlag: true,
      deleteFlag: false,
    };
  },
  mounted() {
    this.bindGet(getAssignRiceDumplingRewardList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.bindSave(deleteAssignRiceDumplingRewardList, 'deleteReward', 'deleteObj', {
      afterSuccess: () => {
        this.deleteFlag = false;
        this.getList();
      },
    });
    this.getList();
  },
  watch: {
    'form.zongziType': function (val) {
      this.form.rewardId = '';
      if (val === '') {
        this.rewardDisableFlag = true;
      } else {
        this.rewardDisableFlag = false;
        this.rewardList = rewardList[val];
      }
    },
  },
  methods: {
    deleteReward(row) {
      this.deleteFlag = true;
      this.deleteObj.id = row.id;
    },
    submitFilterForm() {
      this.filters = { ...this.filters, ...this.form };
      this.gridSearch();
    },
    getList() {
      this.doGet({ action: 'getGrid' });
    },
    selfResetForm(formName) {
      this.resetForm(formName);
      this.submitFilterForm();
    },
    refresh() {
      this.getList();
    },
  },
};
</script>

<style scoped>
  .inline-block{
    display: inline-block;
  }
.fr{
  float: right;
}
</style>
